<template>
	<div id="main_container">
		<div id="phone_container" @click="clickPhoneContainer">
			<input type="number"
			maxlength="11"
			placeholder="请输入手机号码"
			v-model="phone"
			@keyup="phoneInput">
			<div id="phone_clear"
			v-show="phone.length"
			@click="phone = ''"></div>
			<div id="phone_location" v-show="phone.length===11">{{location}}</div>
			<div id="phone_tip_container" v-if="phoneTipShow"
			@click.stop="phoneTipShow=false">
				<div class="phone-tip" v-for="(tip,i) in phoneTip"
				@click.stop="clickPhoneTip(tip)">
					{{tip.phone}}
					<div class="fr">
						<span>{{tip.location}}</span>
						<div class="remove" @click.stop="removePhoneTip(i)"></div>
					</div>
				</div>
			</div>
		</div>
		<div id="option_container">
			<!-- 返还大唐积分 -->
			<h5>大唐消费积分奖励<span class="orange">{{score}}</span><span class="grey-tip">（选填）</span></h5>
			<input id="score_input"
			placeholder="请输入大唐账号…"
			v-model="datangNo">
			<!-- 套餐类型 -->
			<!-- 普通类型 -->
			<div v-if="activeType.id !== 1 && activeType.id !== 3">
				<h5>{{activeType.name}}<span class="orange">（销量: {{activeType.sale}}）</span></h5>
				<div class="grid-container">
					<div class="grid"
					:class="{active: activeSubtype.id === subtype.id}"
					v-for="subtype in activeType.content"
					@click="clickSubtype(subtype)">
						<span class="grid-inner">
							<p class="ellipsis2">{{subtype.title}}</p>
							<p class="ellipsis2 line2">￥{{subtype.price}}元</p>
						</span>
					</div>
					<div class="fake-grid"></div>
					<div class="fake-grid"></div>
				</div>
			</div>
			<!-- 共享流量部分 -->
			<div v-if="activeType.id == 1">
				<!-- 本月 -->
				<div v-if="activeType.content.thisMonth.length">
					<h5>本月共享流量<span class="orange">（销量: {{activeType.sale.t11}}）</span></h5>
					<div class="grid-container">
						<div class="grid"
						:class="{active: activeSubtype.id === subtype.id}"
						v-for="subtype in activeType.content.thisMonth"
						@click="clickSubtype(subtype)">
							<span class="grid-inner">
								<p class="ellipsis2">{{subtype.title}}</p>
								<p class="ellipsis2 line2">￥{{subtype.price}}元</p>
							</span>
						</div>
						<div class="fake-grid"></div>
						<div class="fake-grid"></div>
					</div>
				</div>
				<!-- 次月 -->
				<div v-if="activeType.content.nextMonth.length">
					<h5>次月共享流量<span class="orange">（销量: {{activeType.sale.t12}}）</span></h5>
					<div class="grid-container">
						<div class="grid"
						:class="{active: activeSubtype.id === subtype.id}"
						v-for="subtype in activeType.content.nextMonth"
						@click="clickSubtype(subtype)">
							<span class="grid-inner">
								<p class="ellipsis2">{{subtype.title}}</p>
								<p class="ellipsis2 line2">￥{{subtype.price}}元</p>
							</span>
						</div>
						<div class="fake-grid"></div>
						<div class="fake-grid"></div>
					</div>
				</div>
			</div>
			<!-- 预存话费部分 -->
			<div v-if="activeType.id == 3">
				<h5>{{activeType.name}}<span class="orange">（销量: {{activeType.sale}}）</span></h5>
				<div id="type3_container">
					<div id="two_grid_nav">
						<span :class="{active: activeType.content.activeContent == 'duration1'}"
						@click="activeType.content.activeContent = 'duration1'">6个月充值</span>
						<span :class="{active: activeType.content.activeContent == 'duration2'}"
						@click="activeType.content.activeContent = 'duration2'">12个月充值</span>
					</div>
					<div class="long-grid-container">
						<div class="long-grid"
						:class="{active: activeSubtype.id === subtype.id}"
						v-for="subtype in activeType.content[activeType.content.activeContent]"
						@click="clickSubtype(subtype)">
							<div class="inner">
								<div class="left">
									<div class="title ellipsis">{{subtype.title}}</div>
									<div class="des">{{subtype.description}}</div>
								</div>
								<div class="price">￥{{Math.round(subtype.price)}}元</div>
							</div>
							<div class="sale" v-if="subtype.on_sell == 1">惠</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 流量包类型 -->
			<p class="tip margin">{{activeType.tip}}</p>
			<h5>更多充值业务<span class="grey-tip orange"></span></h5>
			<div class="grid-container">
				<div class="grid colored"
				:class="{hide: activeType.name === type.name}"
				v-for="type in types"
				@click="clickType(type)">
					<span class="grid-inner">{{type.name}}</span>
				</div>
			</div>
		</div>
		<!-- 确认弹窗 -->
		<pop :pop="confirmPop">
			<div id="info_container">
					<p class="info">手机号码：{{phone}}</p>
					<p class="info">办理产品：{{activeType.name + activeSubtype.title}}</p>
					<p class="info">价格：￥{{activeSubtype.price}}元</p>
					<p class="info">大唐账号：{{datangNo}}</p>
					<p class="info">积分获得：{{activeSubtype.point*activeSubtype.price}}</p>
			</div>
			<p class="c-txt-s grey">请核对信息，错填漏填本平台不承担责任</p>
			<div class="btn-container">
				<div class="c-btn"
				@click="cancleConfirm">取消</div>
				<div class="c-btn-orange"
				:class="{disabled: !payBtn}"
				@click="confirm">确定</div>
			</div>
		</pop>
		<!-- 业务不受理弹窗 -->
		<pop :pop="errorPop">
			<p class="c-txt-m">{{errorTip}}</p>
		</pop>
	</div>
</template>
<script>
	import pop from './Pop'
	import pingpp from 'pingpp-js'
	export default{
		name:'recharge',
		data(){
			return{
				phone:'',
				location:'',
				phoneTip:[],
				phoneTipShow: false,
				types:[{
					id:1,
					name:'共享流量',
					tip:'仅限浙江移动号码办理，流量全国范围通用，当月有效，每个号码每月只能办理一次。',
					content: {
						thisMonth:{},
						nextMonth:{}
					}
				},{
					id:2,
					name:'流量红包',
					tip:'仅限浙江移动号码办理，流量全国范围内通用，当月有效，每个号码不限次。'
				},{
					id:3,
					name:'预存话费',
					tip:'全国范围内通用。话费分月返还，非一次性到账。',
					content: {
						duration1:{},
						duration2:{},
						activeContent: 'duration1'
					}
				},{
					id:4,
					name:'话费直充',
					tip: '全国范围内通用，话费一次性到账。'
				}],
				activeType:{},
				activeSubtype:{},
				score:'100%',
				sales: [],
				datangNo:'',
				confirmPop:{
					show: false,
					style:{
						padding:'0.5rem 0.33rem',
						width:'8rem'
					}
				},
				errorPop:{
					show:false,
					style: {
						width: '7.5rem',
						height: '1.3rem',
						lineHeight: '1.3rem',
						borderRadius: '0.13rem'
					}
				},
				payBtn: true,
				errorTip:''
			}
		},
		mounted(){
			let phoneCheck = true;
			try{
				this.phoneTip = JSON.parse(localStorage.getItem('phone') || '[]');
				if(!Array.isArray(this.phoneTip)) phoneCheck = false;
				this.phoneTip.forEach((e) => {
					if(!e.phone) phoneCheck = false;
				})
			} catch(err){}
			if(!phoneCheck) this.phoneTip = [];
			if(this.phoneTip.length > 0) {
				this.phone = this.phoneTip[0].phone;
				this.location = this.phoneTip[0].location;
			}
			this.datangNo = localStorage.getItem('datang') || '';
			this.datangNo = this.datangNo === 'null' ? '' : this.datangNo;
			this.$http.post('',{
				name:'shopping.sys.goodsList'
			}).then((response) => {
				this.types.forEach((e,i) => {
					e.content = response.body.data['type'+(i+1)];
					e.point = response.body.data['type'+(i+1)][0].point;
					e.sale = response.body.data['t'+(i+1)];
					// 共享流量区分本月次月
					if(e.id == 1) {
						let content = {thisMonth:[], nextMonth:[]};
						e.content.forEach((c) => {
							if(c.on_time == 1) content.thisMonth.push(c);
							else content.nextMonth.push(c);
						})
						e.content = content;
					}
					// 话费预存分6月12月
					if(e.id == 3) {
						let content = {duration1: [], duration2: [], activeContent: 'duration1'};
						e.content.forEach((c) => {
							if(c.duration == 1) content.duration1.push(c);
							else content.duration2.push(c);
						})
						e.content = content;
					}
				})
				// 处理入口id
				// 因为php的缘故没有用this.$route.params..
				let typeId = location.pathname.slice(-1) - 1;
				if(!typeId || typeId < 1 || typeId > 4) typeId = 0;
				this.activeType = this.types[typeId];
				this.setTitle(typeId);
			})
		},
		methods:{
			setTitle(typeId){
					switch(typeId) {
						case 0:
							document.title = '共享流量';
							this.score = '100%';
							break;
						case 1:
							document.title = '流量红包';
							this.score = '100%';
							break;
						case 2:
							document.title = '预存话费';
							this.score = '200%';
							break;
						case 3:
							document.title = '话费直充';
							this.score = '100%';
							break;
					}
					this.score = this.types[typeId].point+'%';
					// if(/iPad|iPhone|iPod/.test(navigator.userAgent)) location.reload();
			},
			isPhone(val){
				return /^1[34578]\d{9}$/.test(val);
			},
			phoneInput(){
				this.phoneTipShow = false;
				if(!this.isPhone(this.phone)) {
					this.location = '';
					return;
				}
				this.$http.post('',{
					name:'shopping.sys.phoneOwnership',
					mobile:this.phone
				}).then((response) => {
					const d = response.body.data;
					const res = {
					  data: d
					}
					const data = (new Function(res.data + ';return __GetZoneResult_'))();
					this.location = data.carrier;
				})
			},
			clickPhoneContainer(){
				this.phoneTipShow = true;
			},
			clickPhoneTip(tip, i){
				this.phone = tip.phone;
				this.location = tip.location;
				this.phoneTipShow = false;
			},
			removePhoneTip(i){
				this.phoneTip.splice(i, 1);
				this.savePhoneTip();
			},
			savePhoneTip(){
				let p = Array.from(this.phoneTip);
				// console.log(p)
				localStorage.setItem('phone', JSON.stringify(p.splice(-3,3)));
				// console.log(this.phoneTip)
			},
			addPhoneTip(){
				let isExist = false;
				// alert(JSON.stringify(this.phoneTip))
				this.phoneTip.forEach((a) => {
					if(a.phone == this.phone) isExist = true;
				})
				if(!isExist) this.phoneTip.unshift({
					phone: this.phone,
					location: this.location
				});
			},
			clickType(type){
				this.activeType = type;
				this.setTitle(type.id - 1);
			},
			clickSubtype(subtype){
				this.activeSubtype = subtype;
				if(!this.isPhone(this.phone)) {
					this.errorTip = '请输入正确的手机号';
					this.errorPop.show = true;
					return;
				}
				if((this.activeType.id === 1 || this.activeType.id === 2) && this.location !== '浙江移动') {
					this.errorTip = '当前业务仅支持浙江移动';
					this.errorPop.show = true;
					return;
				}
				// if(this.activeType.id === 3 && this.location.slice(2) !== '移动') {
				// 	this.errorTip = '当前业务仅支持中国移动';
				// 	this.errorPop.show = true;
				// 	return;
				// }
				this.confirmPop.show = true;
			},
			cancleConfirm(){
				this.confirmPop.show = false;
				// this.activeType = {};
				// this.activeSubtype = {};
			},
			confirm(){
				this.payBtn = false;
				this.addPhoneTip();
				this.savePhoneTip();
				localStorage.setItem('datang', this.datangNo);
				this.$http.post('',{
					name:'shopping.sys.orderSubmit',
					mobile: this.phone,
					goods_id: this.activeSubtype.id,
					shopMobile:this.datangNo || '0',
					user_id: 0
				}).then((response) => {
					if(response.body.code !== 1000) {
						alert(response.body.msg);
						return;
					}
					let orderInfo = response.body.data;
					orderInfo.type = 'a';
					this.pingpay(orderInfo, () => {
						this.confirmPop.show = false;
						this.payBtn = true;
					}, () => {
						this.payBtn = true;
					});
				})
			}
		},
		components:{pop}
	}
</script>
<style lang='less' scoped>
@baseColor: #ff891d;
	#main_container{
		color: #333;
	}
	#phone_container{
		width: 100%;
		height: 2rem;
		padding: .4rem;
		border-bottom: 1px solid #969696;
		background: #fff;
		position: relative;
		input{
			font-size:0.6rem;
			margin-top: .2rem;
			letter-spacing:1.28px;
			float: left;
			width: 6.5rem;
			border:none;
		}
		.clear{
			width: 0.4rem;
			height: .4rem;
			border-radius: 100%;
			float: right;
			background: url(../assets/img/search_close_press@3x.png) no-repeat center;
		}
		#phone_clear{
			.clear;
			margin-top: .45rem;
		}
		#phone_location{
			font-size: 0.4rem;
			float: right;
			margin-right: 0.09rem;
			margin-top: .4rem;
		}
		#phone_tip_container{
			position: absolute;
			top:2rem;
			left: 0;
			width: 100%;
			height: 10rem;
			.phone-tip{
				padding: .25rem .4rem;
				font-size: 0.37rem;
				color: #5C5C5C;
				border-bottom: 1px solid #969696;
				background: #fff;
				.remove{
					.clear;
					margin-top: .05rem;
					margin-left: .1rem;
				}
			}
		}
	}
	#option_container{
		padding: 0.67rem .4rem;
		h5{
			font-size: 0.43rem;
		}
		.tip{
			font-size:0.37rem;
			color:#969696;
			letter-spacing:0.56px;
			&.margin{
				margin-bottom: .5rem;
			}
		}
		.grid-container{
			margin-top: 0.5rem;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.grid{
				border: 2px solid #979797;
				border-radius:0.13rem;
				width:2.93rem;
				height:1.6rem;
				font-size: 0.35rem;
				display: flex;
				margin-bottom: 0.27rem;
				background: #fff;
				&.active{
					background:#ff891d;
					border-color: transparent;
					color: #fff;
				}
				&.hide{
					display: none;
				}
				&.colored{
					color: #ff891d;
					border-color: @baseColor;
				}
				.grid-inner{
					margin: auto;
					text-align: center;
					p{
						max-width: 2.7rem;
					}
					.line2{
						margin-top: .1rem;
					}
				}
			}
			.fake-grid{
				height: 0;
				width:2.93rem;
			}
		}
	}
	.long-grid-container{
		margin-top: .5rem;
		.long-grid{
			background: #FFFFFF;
			border: 2px solid #D3D3D3;
			border-radius: 0.13rem;
			margin-bottom: .2rem;
			padding: .2rem .3rem;
			position: relative;
			&.active{
				border-color: @baseColor;
			}
			.inner{
				overflow: hidden;
			}
			.left{
				float: left;
				.title{
					font-size: 0.38rem;
					color: #656565;
					letter-spacing: 0.72px;
					max-width: 4rem;
					margin-bottom: .15rem;
				}
				.des{
					font-size: 0.32rem;
					color: #9B9B9B;
					letter-spacing: -0.77px;
					width: 4.2rem;
					word-break: break-word;
					white-space: pre-wrap;
				}
			}
			.price{
				float: right;
				font-size: 0.4rem;
				/*color: @baseColor;*/
				margin-top: .25rem;
			}
			.sale{
				position: absolute;
				background: rgba(253, 165, 84, 0.83);
				width: 0.7rem;
				height: .7rem;
				border-radius: 100%;
				color: #fff;
				font-size: .38rem;
				text-align: center;
				line-height: .7rem;
				right: -.3rem;
				top: -.3rem;
			}
		}
	}
	#type3_container{
		width: 74%;
		margin: .5rem auto;
		#two_grid_nav{
			font-size: 0.36rem;
			text-align: center;
			overflow: hidden;
			span{
				display: inline-block;
				width: 50%;
				height: 1rem;
				line-height: 1rem;
				float: left;
				border: 2px solid @baseColor;
				color: @baseColor;
				background: #fff;
				&.active{
					color: #fff;
					background: @baseColor;
				}
			}
			span:first-of-type{
				border-radius: 0.13rem 0 0 .13rem;
			}
			span:nth-of-type(2){
				border-radius: 0 .13rem .13rem 0;
			}
		}
	}
	#score_input{
		border:1px solid #979797;
		border-radius:0.13rem;
		width: 100%;
		font-size: 0.38rem;
		padding: .2rem .3rem;
		margin: 0.47rem auto;
	}
	/*确认弹框*/
	#info_container{
		border-bottom: 1px solid #969696;
		text-align: left;
		padding: 0 .5rem;
		.info{
			font-size: 0.43rem;
			margin-bottom: .3rem;
		}
	}
	.btn-container{
		width: 5rem;
		margin: 0 auto;
		margin-top: .7rem;
		display: flex;
		justify-content: space-between;
	}
	.grey-tip{
		color: #aaa;
		font-size: .38rem;
	}
</style>